<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      import {
        KeepAlive,
        provide,
        inject,
        ref,
        defineAsyncComponent,
        getCurrentInstance,
        onMounted,
        onUpdated,
        onUnmounted,
        reactive,
        toRefs,
        Text,
        createVNode,
        h,
        render,
        Fragment,
        computed,
      } from "../js/runtime-dom/index.js";

      // import {
      //   KeepAlive,
      //   defineAsyncComponent,
      //   onMounted,
      //   onUpdated,
      //   onUnmounted,
      //   Text,
      //   Fragment,
      //   createVNode,
      //   render,
      //   h,
      //   proxyRefs,
      //   toRefs,
      //   reactive,
      //   effect,
      //   watch,
      //   watchEffect,
      //   computed,
      //   ref,
      //   toRef,
      //   createRenderer,
      // } from "../js/vue.esm-browser.prod.js";

      const MyComponent1 = {
        name: "xxx1",
        setup(props) {
          onMounted(() => {
            console.log("MyComponent1 mounted");
          });
          onUnmounted(() => {
            console.log("MyComponent1 unmounted");
          });
        },
        render: () => h("h1", "h1"),
      };

      const MyComponent2 = {
        name: "xxx2",
        setup(props) {
          onMounted(() => {
            console.log("MyComponent2 mounted");
          });
          onUnmounted(() => {
            console.log("MyComponent2 unmounted");
          });
        },
        render: () => h("h1", "h2"),
      };
      render(
        h(KeepAlive, null, {
          default: () => h(MyComponent1),
        }),
        app
      );

      setTimeout(() => {
        render(
          h(KeepAlive, null, {
            default: () => h(MyComponent2),
          }),
          app
        );
      }, 1000);
      setTimeout(() => {
        render(
          h(KeepAlive, null, {
            default: () => h(MyComponent1),
          }),
          app
        );
      }, 1500);
    </script>
  </body>
</html>
